<template>
  <div class="wrapper" @click="onClickItem">
    <LImage v-if="item.counterImage" :src="item.counterImage" alt="" class="pair-img mr20" />
    <div v-else class="d-left-img mr20" />
    <div class="pair-name mr10">
      <text class="pair-name-text font36 text2">{{item.pair}}</text>
      <text class="pair-name-text font28 text3">{{item.counterCoin}}/{{ item.baseCoin }}</text>
    </div>
    <div class="pair-ext">
      <div class="pair-ext-top">
        <LImage v-if="item.exchangeImage" :src="item.exchangeImage" alt="" class="pair-ext-tip mr10" />
        <div v-else class="d-right-img mr10"></div>
        <text class="pair-ext-name font32 text2 mr10">{{item.exchangeName}}</text>
      </div>
      <text class="pair-ext-name font28 text3 mr10">{{item.describe}}</text>
    </div>

  </div>
</template>


<style src="@/_css/style.css" ></style>
<style scoped>
  .wrapper {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    background-color: #161a33;
    padding: 40px;
    margin-left: 40px;
    margin-right: 40px;
    border-radius: 8px;
    align-items: center;
  }
  .pair-img {
    width: 80px;
    height: 80px;
  }
  .pair-name {
    flex: 1;
    flex-direction: column;
    justify-content: center;
  }
  .pair-name-text {
    lines: 1;
    text-overflow: ellipsis;
    word-break: keep-all;
    overflow-wrap: normal;
    white-space: nowrap;
  }
  .pair-ext {
    flex-direction: column;
    justify-content: center;
  }
  .pair-ext-top {
    flex-direction: row;
    align-items: center;
  }
  .pair-ext-tip {
    width: 36px;
    height: 36px;
    border-radius: 18px;
  }
  .pair-ext-name {
    lines: 1;
    text-overflow: ellipsis;
    word-break: keep-all;
    overflow-wrap: normal;
    white-space: nowrap;
  }
  .d-left-img {
    background-color: #f3ba00;
    width: 80px;
    height: 80px;
    border-radius: 40px;
  }
  .d-right-img {
    background-color: #f3ba00;
    width: 36px;
    height: 36px;
    border-radius: 18px;
  }
</style>

<script>
  import jconfig from "@/_js/config";
  import jmath from "@/_js/math";
  import I18N from "@/_i18n/i18n";
  import jdebug from "@/_js/debug";
  var T = I18N.t;
  export default {
    props: {
      item: {
        type: Object,
        default: undefined,
      },
    },
    data: () => ({
      Config: jconfig,
      T: T,
    }),
    methods: {
      onClickItem() {
        this.$emit("onClickItem", this.item);
      },
    },
  };
</script>